<template>
    <div class="search">
        <div class="search-form">
            <input class="search-shop" type="text" v-model="keyword" name="keyword" placeholder="伟丰新能源商城" />
            <em class="search-ico"></em>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'search',
        watch: {

        },
        created() {

        },
        mounted() {

        },
        data() {
            return {
                // 搜索商品关键字
                keyword: ''
            };
        },
        methods: {

        },
        computed: {

        },
        components: {

        }
    };

</script>

<style lang="scss" scoped>
    .search {
        /* 父级的padding来取代子级的margin */
        padding-top: 40px;
        .search-form {
            width: 690px;
            line-height: .42rem;
            margin: 0 auto;
            position: relative;
            .search-shop {
                width: 690px;
                height: 14px;
                background-color: #fff;
                border-radius: 30px;
                border: 1px solid #999;
                padding: .42rem 0 .42rem 25px;
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
                font-weight: bold;
                font-size: 24px;
                color: #333;
                position: relative;
                z-index: 9;
            }

            .search-ico {
                position: absolute;
                right: 26px;
                top: 14px;
                z-index: 10;
                display: block;
                width: 37px;
                height: 37px;
                background: url(/images/wf_ico.png) no-repeat -235px -336px;
                background-size: 834px 535px;
                text-indent: -999999em;
            }
        }
    }

</style>
